import { PageContainer } from "@ant-design/pro-components";
import { Button } from "antd";
import { connect } from "umi";
import { namespace } from "./configFile";
import { useState, useRef } from "react";
import Class from "./Class";
import BaseSet from "./Base"; //通用设置
import PrivateCourse from "@/components/Appointment/Private"; //私教课预约
import LeagueClass from "@/components/Appointment/LeagueClass"; //团课预约
const Page = (props) => {
  const BaseSetRef = useRef();
  const PrivateCourseRef = useRef();
  const LeagueClassRef = useRef();
  const classRef = useRef();
  const [activeKey, setActiveKey] = useState("-1");
  return (
    <PageContainer
      title="预约设置"
      footer={[
        <Button
          onClick={() => {
            if (activeKey == "-1") {
              BaseSetRef.current && BaseSetRef.current.changeVal();
            } else if (activeKey == "1") {
              PrivateCourseRef.current && PrivateCourseRef.current.changeVal();
            } else if (activeKey == "2") {
              LeagueClassRef.current && LeagueClassRef.current.changeVal();
            }
          }}
          size="large"
          type="primary"
        >
          提交
        </Button>,
      ]}
      tabActiveKey={activeKey}
      tabList={[
        {
          tab: "通用",
          key: "-1",
          children: <BaseSet ref={BaseSetRef} />,
        },
        {
          tab: "私教课",
          key: "1",
          children: <PrivateCourse ref={PrivateCourseRef} />,
        },
        {
          tab: "团课",
          key: "2",
          children: <LeagueClass ref={LeagueClassRef} />,
        },
        {
          tab: "班课",
          key: "3",
          disabled: true,
          children: <Class ref={classRef} />,
        },
      ]}
      onTabChange={(e) => {
        setActiveKey(e);
      }}
    ></PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
